<template>
  <div id="service-login" class="relative">
    <page-loading></page-loading>
    <div class="form-wrap mb20">
      <div class="form-title">{{form1.title}}：</div>
      <div class="vertical-align-flex">
        <!-- <div class="field">{{form1.fields[0].label}}：</div>
        <div class="value">
          <span class="value-text">{{cloud_login.status == "1" ? form1.login_status[0] :
            form1.login_status[1] }}</span>
        </div> -->

      </div>
      <os-switch :item="form1.fields[0]" v-model="toggle" @handleSwitch="set_cloud_login"></os-switch>
      <os-entry :item="form1.fields[1].label">
        <span class="value-text">{{cloud_login.status == "1" ? form1.login_status[0] :
          form1.login_status[1] }}</span>
      </os-entry>
      <os-input :item="form1.fields[2].label" v-model="cloud_login.ngrokid"></os-input>
      <os-entry :item="form1.fields[3].label">
        <!-- onclick原生直接阻止默认事件 @click 通过函数return false preventDefault -->
        <!-- href="javascript: void(0)/'';" -->
        <a class="add" @click="goPage">{{cloud_login.ngrokurl}}</a>
      </os-entry>
      <!-- <div class="value alone-right">
        <div class="btn btn-blue">{{$t('btn.disable')}}</div>
      </div> -->
    </div>
  </div>
</template>

<script>

  export default {
    data(){
      return {
        cloud_login: {},
        toggle: "1",
      }
    },
    computed: {
      form1(){
        return this.$t('service.cloud.form1')
      },
      form2() {
        return this.$t('service.cloud.form2')
      },
      connect_status(){
        if(this.cloud_login.status){
          return '已连接（1161）'
        } else {
          return '未连接'
        }
      }
    },
    created(){
      this.$bus.emit('changeTab', 0)
      this.get_cloud_login()
      this.get_ac_info()
    },
    methods: {
      get_cloud_login(){
        this.$req.get('/webapi?op=get_cloud_login').then(res=> {
          console.log(res)
          this.cloud_login = res
          this.toggle = res["switch"]
        })
      },
      set_cloud_login() {
        this.$nextTick(()=> {
          console.log(this.toggle)
          // this.$req.get("/webapi?op=set_cloud_login", { params: {
          //   switch: this.toggle
          // }}).then(res=> {
          //   this.get_cloud_login()
          // })
          this.proxy_req("get", "/webapi?op=set_cloud_login", {switch: this.toggle}, this.get_cloud_login, true)
        })

      },
      get_ac_info(){
        this.$req.get('/webapi?op=get_ac_info').then(res=> {
          console.log(res)
        })
      },
      change_ngrokid(){
        this.$req.get('/webapi?op=get_cloud_login_1580953145547', {
          params: {
            ngrokid: this.cloud_login.ngrokid
          }
        }).then(res=> {
          this.$message.success('修改云登录标识成功！')
        })
      },
      goPage() {
        if(this.cloud_login.ngrokurl){
          // location.href在当前页面加载新页面
          // window.location.href = this.cloud_login.ngrokurl
          this.$req.get("/webapi?op=activate_ngrokc").then(res=> {}).catch(err=> {}).finally(()=> {
            console.log("ok")
            window.open(this.cloud_login.ngrokurl)
          })

        } else {
          return false;
        }
      }
    },
    created() {
      this.$bus.emit('changeTab', 0)
      this.get_cloud_login()
    }
  }
</script>

<style lang="scss" scoped>

</style>
